<template>
  <ViewScroll class="home-box">
    <div class="home">
      <!-- <div class="home_null"></div> -->
      <!-- 轮播图 start -->
      <div>
        <swiper :loops='loopsList'></swiper>
      </div>
      <!-- 轮播图  end -->

      <!-- 超实惠直达  start -->
      <div class="special_sale">
        <div class="temai" v-for="(c,i) in homeList" :key="i">
          <img :src="c.image" alt />
          <p>{{ c.title }}</p>
        </div>
        <div class="title">
          <div>
            <img src="../../public/line.png" alt />
          </div>
          <div class="line-title">超实惠直达</div>
        </div>
      </div>
      <!-- 超实惠直达  end -->
      <!-- 盛夏新品 start -->
      <material-benefit :benfit="materialList"></material-benefit>
      <!-- 盛夏新品  end -->
      <!-- 热门分类 start-->
      <div class="hot">
        <div class="title">
          <div>
            <img src="../../public/line.png" alt />
          </div>
          <div class="line-title">热门分类</div>
        </div>
        <!-- <div class="hot_t"> -->
        <classification-type :items="hotList"></classification-type>
        <!-- </div> -->
      </div>
      <!-- 热门分类 end -->

      <!-- 猜你喜欢 start -->
      <div class="title">
        <div>
          <img src="../../public/line.png" alt />
        </div>
        <div class="line-title">猜你喜欢</div>
      </div>
      <like :items='moguJie'></like>
      <!-- 猜你喜欢 end -->
      <div class="home_full"></div>
    </div>
  </ViewScroll>
</template>
<script>
import swiper from "../components/Swiper";
import like from "../components/Like";
import ClassificationType from "../components/ClassificationType";
import MaterialBenefit from "../components/MaterialBenefit";
export default {
  components: {
    swiper,
    like,
    ClassificationType,
    MaterialBenefit
  },
  data() {
    return {
      // 轮播图
      swiperList: [],

      // 分类导航
      homeList: [],
      hotList: [],
      materialList: [],
      loopsList:[],
      moguJie:[]
    };
  },

  methods: {
    loadHomeData() {
      this.$api
        .loadForHomeData({
          appPlat: "m",
          pids: "140378,106930,51833,51836"
        })
        .then(data => {
          this.homeList = data[106930].list;
          this.hotList = data[51836].list;
          this.materialList = data[51833].list;
          this.loopsList = data[140378].list;
        })
        .catch(error => {
          console.error(error);
        });
    },
    loadMogujie() {
      this.$api
        .loadmogujieData({
          pids: "9750",
          sort: "pop",
          cKey: 46
        })
        .then(data => {
          // console.log(data.wall.docs);
          this.moguJie = data.wall.docs
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  mounted() {
    this.loadHomeData();
    this.loadMogujie();
  }
};
</script>
<style lang="less" scoped>
.home_full {
  width: 100%;
  height: 100px;
}
.home-box {
  position: absolute;
  top: 0rem;
  bottom: 0rem;
  left: 0rem;
  right: 0rem;
  // overflow-y: auto;
  overflow: hidden;
}
.home {
  //   .home_null {
  //     // width: 100%;
  //     // height: 100px;
  //   }
  .special_sale {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    // background-color: #dedede;
    padding: 10px 0px;

    .temai {
      width: 20%;
      text-align: center;
      font-size: 16px;
      padding: 10px 0;
      img {
        width: 80%;
      }
    }
  }

  .hot {
    width: 100%;
  }
  .title {
    // text-align: center;
    width: 100%;
    text-align: center;
    padding: 20px 0px;
    position: relative;
    .line-title {
      position: absolute;
      font-size: 30px;
      top: 20px;
      left: 50%;
      transform: translateX(-52%);
      font-weight: bold;
    }
  }
}
</style>